<template>
  <div class="page page-child">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title"  >
              <p>考勤</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <!--打卡日历-->
            <div class="calendarWrapper">
              <div class="gradient">
                <div class="box">
                  <div class="yearmonth">
                    <div class="preMonth">
                      <div class="item-content" @click="doDay('left')" >
                        <div class="icon iconfont icon-previous"></div>
                      </div>
                    </div>
                    <div class="currMonth">
                      <div class="item-content" id="currymd">{{currentDate}}</div>
                    </div>
                    <div class="nextMonth">
                      <div class="item-content" @click="doDay('right')">
                        <div class="icon iconfont icon-next"></div>
                      </div>
                    </div>
                  </div>
                  <div class="spaceAroundCenter week">
                    <div>一</div>
                    <div>二</div>
                    <div>三</div>
                    <div>四</div>
                    <div>五</div>
                    <div>六</div>
                    <div>日</div>
                  </div>
                  <div class="spaceAroundCenter">
                    <div class="flex-item" v-for="(vo,index) in currentDayList" :key="index" :class="vo.data?vo.data.status:''">
                      <div  class="item-content bk-color-day" @click="onClickItem($event,index)" v-if="vo.day === currentDay">
                        <div class="day">{{vo.day}}</div>
                      </div>
                      <div :id='index' class="item-content bk-color-dayClick" v-else-if="index === currentClickKey && currentClickKey !== '' && vo.day !== ''">
                        <div class="day">{{vo.day}}</div>
                      </div>
                      <div :id='index' class="item-content" @click='onClickItem($event,index)' v-else>
                        <div class="day">{{vo.day}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <!-- 上下班打卡 -->
              <div class="punchTitle">上下班打卡</div>
              <div class="detalBar">
                <div class="barLeft">
                  <div class="ontime">09:00</div>
                  <div class="timebar"></div>
                  <div class="offtime">18:00</div>
                </div>
                <div class="barRight">
                  <div class="top"   @click="toPunch(0)">
                    <div class="onwork">上班</div>
                    <div class="status">{{ontime?(ontime<=companyOntime?'正常打卡':'迟到打卡'):'今日未打卡'}}{{ontime? '('+ontime+')' : ''}}</div>
                  </div>
                  <div class="bottom"   @click="toPunch(0)">
                    <div class="offwork">下班</div>
                    <div class="status">{{offtime?(offtime>=companyOfftime?'正常打卡':'提前打卡'):'今日未打卡'}}{{offtime? '('+offtime+')' : ''}}</div>
                  </div>
                </div>
              </div>
              <!-- 外出打卡 -->
              <div class="punchTitle">外出打卡</div>
              <div class="outPunch">
                <div class="weui-cells weui-cells_after-title">
                  <div class="weui-cell weui-cell_example ">
                    <div class="weui-cell__hd">
                      {{onoutTime?onoutTime:'00:00'}}
                    </div>
                    <div class="weui-cell__bd"  @clcik="toPunch(1)">
                      <div>上班</div>
                      <div>{{onoutLoca?onoutLoca:'外出未打卡'}}</div>
                    </div>
                  </div>
                  <div class="weui-cell weui-cell_example " >
                    <div class="weui-cell__hd">
                      {{offoutTime?offoutTime:'00:00'}}
                    </div>
                    <div class="weui-cell__bd"  @clcik="toPunch(1)">
                      <div>下班</div>
                      <div>{{offoutLoca?offoutLoca:'外出未打卡'}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Index"
      ,data(){
          return{
            currentDate:''
            ,currentDayList:''
            ,currentObj:''
            ,currentClickKey:''
            ,ontime: '' //当前日期下的上班时间
            ,offtime: '' //下班时间
            ,onoutTime: ''//上班外出打卡时间
            ,onoutLoca: ''//上班外出打卡地点
            ,offoutTime: ''//下班外出打卡时间
            ,offoutLoca: ''//下班外出打卡地点
            ,companyOntime:'09:00' //公司上班时间
            ,companyOfftime:'18:00'  //公司下班时间
            ,punchData: [ //打卡数据
              [], //1月
              [],
              [],
              [],
              [],
              [],
              [],
              [],
              [],
              [  //10月
                {
                  date: '10月1日', //日期
                  ontime: '08：56', //上班时间
                  onLoca: '郑州轻工业大学', //上班打卡的位置
                  offtime: '18：05', //下班时间
                  offLoca: '', //下班打卡的位置
                  onoutTime: '', //上班外出打卡的时间
                  onoutLoca: '',  //上班外出打卡的位置
                  offoutTime: '',  //下班外出打卡的时间
                  offoutLoca: '郑州轻工业大学', //下班外出打卡的位置
                  status: 'normal',//状态  正常/不正常
                }, {
                date: '10月2日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '16：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'abnormal',
              }, {
                date: '10月3日',
                ontime: '',
                onLoca: '郑州轻工业大学',
                offtime: '',
                offLoca: '',
                onoutTime: '08:56',
                onoutLoca: '郑州轻工业大学',
                offoutTime: '18:20',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月4日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月5日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月6日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月7日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月8日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月10日', //日期
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月10日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月11日',
                ontime: '08：56',
                onLoca: '郑州轻工业大学',
                offtime: '18：05',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '郑州轻工业大学',
                status: 'normal',
              }, {
                date: '10月12日',
                ontime: '08:56',
                onLoca: '郑州轻工业大学',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月13日', //日期
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月14日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月15日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月17日', //日期
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月18日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月110日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月20日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月21日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月22日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月23日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月24日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月25日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月26日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月27日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月28日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }, {
                date: '10月29日',
                ontime: '',
                onLoca: '',
                offtime: '',
                offLoca: '',
                onoutTime: '',
                onoutLoca: '',
                offoutTime: '',
                offoutLoca: '',
                status: 'normal',
              }
              ],
              [],
              []
            ]
          }
      }
      ,methods:{
        goBack(){
          this.$router.back();
        }
        // 日期切换
        ,doDay(dir) {
          let currentObj =this.currentObj;
          let Y = currentObj.getFullYear();
          let m = currentObj.getMonth() + 1;
          let d = currentObj.getDate();
          let str = '';
          if (dir === 'left') {
            m -= 1;
            if (m <= 0) {
              str = (Y - 1) + '/' + 12 + '/' + d
            } else {
              str = Y + '/' + m + '/' + d
            }
          } else {
            m += 1;
            if (m <= 12) {
              str = Y + '/' + m + '/' + d
            } else {
              str = (Y + 1) + '/' + 1 + '/' + d
            }
          }
          currentObj = new Date(str);
            this.currentDate= currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月';
            this.currentObj=currentObj;
            // 设置当前月份日期布局
            this.setSchedule(currentObj);
            // 设置翻页后的打卡状态
           var x = this.currentObj.getMonth();
           var y = this.currentDay - 1;
           this.setStatus(x,y);
          //设置当前按钮下的年月日
          this.clickDate=currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日';
          // console.log(this.currentDayList)
        },
        // 格式化当前日期
        getCurrentDayString() {
          var objDate = this.currentObj;
          if (objDate !== '') {
            return objDate
          } else {
            var c_obj = new Date();
            var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate();
            return new Date(a)
          }
        },
        // 设置当前月份下的日期数组（当前月天数，从哪儿开始）
        setSchedule: function(currentObj) {
          var m = currentObj.getMonth() + 1;
          var Y = currentObj.getFullYear();
          var d = currentObj.getDate();
          var dayString = Y + '/' + m + '/' + currentObj.getDate();
          var currentDayNum = new Date(Y, m, 0).getDate();
          var currentDayWeek = currentObj.getUTCDay() + 1;
          var result = currentDayWeek - (d % 7 - 1);
          var firstKey = result <= 0 ? 7 + result : result;
          var currentDayList = [];
          var f = 0;
          for (var i = 0; i < 42; i++) {
            let data = [];
            if (i < firstKey - 1) {
              currentDayList[i] = {
                day: ''
              }
            } else {
              if (f < currentDayNum) {
                currentDayList[i] = {
                  day: f + 1
                };
                f = currentDayList[i].day
              } else if (f >= currentDayNum) {
                currentDayList[i] = {
                  day: ''
                }
              }
            }
          }
          // 将当前月份打卡状态合并到一个数组
          var idx = 0;
          currentDayList.forEach((item, index) => {
            if (item.day !== '') {
              item.data = this.punchData[m - 1][idx];
              idx = idx + 1;
            }
          });
            this.currentDayList=currentDayList
        }
        ,onClickItem(e,index) {
          this.currentClickKey=index;
            let day = this.currentDayList[index].day;
            this.clickDate=this.currentDate+day+'日';
          // 动态设置选择日期上班状态
            let x=parseInt(this.currentDate.split('年')[1])-1;
            let y =parseInt(day)-1;
            this.setStatus(x,y);
        }
        ,setStatus(x,y){// 设置当前日期下的状态  x:当前月份 y:当前日期
          if (this.punchData[x][y] === '' || this.punchData[x][y] === undefined) {
              this.ontime= '';
              this.offtime='';
          } else {
              this.ontime=this.punchData[x][y].ontime;
              this.onLoca=this.punchData[x][y].onLoca;
              this.offtime=this.punchData[x][y].offtime;
              this.offLoca=this.punchData[x][y].offLoca;
              this.ontime=this.punchData[x][y].ontime;
              this.onoutTime=this.punchData[x][y].onoutTime;
              this.onoutLoca=this.punchData[x][y].onoutLoca;
              this.offoutTime=this.punchData[x][y].offoutTime;
              this.offoutLoca=this.punchData[x][y].offoutLoca;
          }
        }
        ,toPunch(idx) {
          // 获取今日数据
          let currData = {
            ontime: this.data.ontime,
            onLoca:this.data.onLoca,
            offtime: this.data.offtime,
            offLoca:this.data.offLoca,
            onoutTime: this.data.onoutTime,
            onoutLoca: this.data.onoutLoca,
            offoutTime: this.data.offoutTime,
            offoutLoca: this.data.offoutLoca,
            clickDate:this.data.clickDate,
            index: idx
          }
          currData = JSON.stringify(currData)
          // window.navigateTo({
          //   url: '../punch/punch?currData=' + currData,
          // })
        }
      }
      ,mounted() {
          let currentObj = this.getCurrentDayString();
          this.currentDate=currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月';
          this.currentDay=currentObj.getDate();
          this.currentObj=currentObj;
          this.clickDate=currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate()+'日';

        // 设置当前日期下的状态
        var x = this.currentObj.getMonth();
        var y = this.currentDay - 1;
        this.setStatus(x,y);
        // 设置当前月份日期布局
        this.setSchedule(currentObj);

      }
    }
</script>

<style scoped>
   .gradient {
    background-color: #fff;
  }

  .spaceAroundCenter {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
  }

  .spaceAroundCenter.week {
    color: #01aaed;
  }

   .yearmonth {
    text-align: center;
    padding: 5px 0;
  }

  .yearmonth .preMonth, .yearmonth .nextMonth, .yearmonth .currMonth {
    display: inline-block;
  }

  .yearmonth .preMonth .item-content, .yearmonth .nextMonth .item-content {
    width: 40px;
    text-align: center;
  }

  .yearmonth  .item-content .icon {
    font-size: 25px;
    color: #22b7fc;
  }

  .flex-item {
    width: 14.2%;
  }

  .item-content {
    padding: 7.5px 0;
    text-align: center;
    color: #333;
  }

  .abnormal .item-content .day {
    background-color: #ff5722;
    color: #333;
    width: 35px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    height: 35px;
    line-height: 35px;
  }

  .item-content .day {
    line-height: 35px;
    font-size: 15px;
  }

  #currymd {
    font-size: 19px;
    font-weight: normal;
    color: #000;
    width: 127.5px;
  }

  /* 当前日期 */

  .bk-color-day {
    color: #fff;
    border-radius: 50%;
  }

  .bk-color-day .day {
    width: 35px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    height: 35px;
    background: #62c9f8;
    line-height: 35px;
  }

  /* 当前选中日期 */

  .bk-color-dayClick {
    color: #fff;
    border-radius: 50%;
  }

  .bk-color-dayClick .day {
    width: 35px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    height: 35px;
    background: #e5e5e5;
    line-height: 35px;
  }

  .item-content-current-day {
    flex-grow: 2;
  }
   .punchTitle {
     width: 100%;
     padding-top: 5px;
     padding-left: 2.5px;
     color: gray;
     font-size: 13px;
   }

   .outPunch {
     margin-top: 5px;
   }

   .outPunch .weui-cells::before, .outPunch .weui-cells::after {
     content: unset;
   }

   .outPunch .weui-cell {
     height: 60px;
     box-sizing: border-box;
     padding: 0 15px;
   }

   .outPunch .weui-cell__hd {
     width: 18%;
     height: 100%;
     line-height: 60px;
     font-size: 15px;
     color: #333;
   }

   .outPunch .weui-cell__bd {
     height: 100%;
   }

   .outPunch .weui-cell__bd div:first-child {
     font-size: 14px;
     font-weight: bold;
     height: 30px;
     line-height: 30px;
     color: #000;
   }

   .outPunch .weui-cell__bd div:last-child {
     font-size: 12.5px;
     color: #555;
     height: 30px;
     line-height: 30px;
   }
   .barLeft {
     padding: 5px 0;
     box-sizing: border-box;
     width: 18%;
     text-align: center;
     color: #333;
     font-size: 15px;
     font-weight: 500;
     display: inline-block;
     height: 100%;
   }

   .timebar {
     width: 4px;
     height: 60px;
     background-color: #eee;
     margin-left: 50%;
     transform: translateX(-50%);
   }

   .barRight {
     display: inline-block;
     height: 100%;
     width: 80%;
     vertical-align: top;
   }

   .barRight .top {
     border-bottom: 1px solid #cfcfcf;
     padding-top: 5px;
     box-sizing: border-box;
   }

   .barRight .top, .barRight .bottom {
     height: 50%;
   }

   .barRight .bottom {
     padding-bottom: 5px;
     box-sizing: border-box;
   }

   .barRight .onwork, .barRight .offwork {
     font-size: 14px;
     font-weight: bold;
     height:30px;
     line-height: 30px;
   }

   .barRight .status {
     font-size: 12.5px;
     color: #555;
   }

</style>
